<template>
  <div class="home-container">
    <el-container>
      <el-aside width="200px">
        <el-menu :router="true" :default-active="$route.path" @open="handleOpen" @close="handleClose">
          <el-menu-item index="/home/novels" @click="handleMenuClick">
            <i class="el-icon-document"></i>
            <span slot="title">小说列表</span>
          </el-menu-item>
          <el-menu-item index="/home/uploadNovel" @click="handleMenuClick">
            <i class="el-icon-upload2"></i>
            <span slot="title">上传小说</span>
          </el-menu-item>
          <el-menu-item index="/home/myComments" @click="handleMenuClick">
            <i class="el-icon-chat-dot-square"></i>
            <span slot="title">我的评论</span>
          </el-menu-item>
          <el-menu-item index="/home/myReports" @click="handleMenuClick">
            <i class="el-icon-warning"></i>
            <span slot="title">我的举报</span>
          </el-menu-item>
          <el-menu-item v-if="isAdmin" index="/home/users" @click="handleMenuClick">
            <i class="el-icon-user-solid"></i>
            <span slot="title">管理用户</span>
          </el-menu-item>
          <el-menu-item v-if="isAdmin" index="/home/manageNnovels" @click="handleMenuClick">
            <i class="el-icon-user-solid"></i>
            <span slot="title">管理小说</span>
          </el-menu-item>
          <el-menu-item v-if="isAdmin" index="/home/checkNovel" @click="handleMenuClick">
            <i class="el-icon-s-check"></i>
            <span slot="title">审核小说</span>
          </el-menu-item>
          <el-menu-item v-if="isAdmin" index="/home/reports" @click="handleMenuClick">
            <i class="el-icon-s-check"></i>
            <span slot="title">审核举报</span>
          </el-menu-item>
          <el-sub-menu>
            <template #title>
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/home/info">
              <el-icon>
                <User/>
              </el-icon>
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="/home/changeAvatar">
              <el-icon>
                <Crop/>
              </el-icon>
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="/home/resetPassword">
              <el-icon>
                <EditPen/>
              </el-icon>
              <span>重置密码</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="user-info">
            <span>欢迎，{{ userInfo.username }}</span>
            <el-button type="text" @click="logout">注销</el-button>
          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useTokenStore } from '@/stores/token.js'
import request from '@/utils/request.js'
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const userInfo = ref({})
    const tokenStore = useTokenStore()
    const router = useRouter()
    const isAdmin = computed(() => userInfo.value.role === 2)

    const getUserInfo = async () => {
      try {
        const response = await request.get('/user/info')
        if (response.code === 1) {
          userInfo.value = response.data
        } else {
          ElMessage.error(response.msg || '获取用户信息失败')
        }
      } catch (error) {
        ElMessage.error('服务异常')
      }
    }

    const logout = () => {
      tokenStore.removeToken()
      ElMessage.success('已注销')
      router.push('/user/login')
    }

    const handleMenuClick = (item) => {
      // 可以在这里添加更多的菜单点击处理逻辑
    }

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }

    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }

    onMounted(() => {
      getUserInfo()
    })

    return {
      userInfo,
      isAdmin,
      logout,
      handleMenuClick,
      handleOpen,
      handleClose
    }
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.user-info {
  display: flex;
  align-items: center;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-menu {
  border-right: none;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>